<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  <style>
    .div-card {
      border: 1px gray solid;
      border-radius: 10px;
      padding: 15px;
    }
    
    .div-card-title {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .div-card-son {
      width: 100px;
      height: 100px;
      color: darkgray;
      font-size: 12px;
      border: 1px solid darkgray;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    /*@keyframes规则名称重复则靠后的规则生效*/
    @keyframes name {
      from {
        background-color: black;
      }
      
      50%{
        background-color: wheat;
      }
      
      to {
        background-color: white;
      }
    }
    
    @keyframes name {
      from {
        background-color: pink;
      }
      
      /*@keyframes规则内关键帧重复则重复关键帧都生效*/
      50%{
        background-color: skyblue;
      }
      
      50%{
        border-radius: 50px;
        border: 3px grey solid !important;/*!important被忽略*/
      }
      
      to {
        background-color: plum;
      }
    }
    
    .animation-name {
      animation-duration: 4s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
    
    .animation-duration {
      animation-name: name;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
    
    .animation-delay {
      animation-name: name;
      animation-duration: 4s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
    
    .animation-iteration-count {
      animation-name: name;
      animation-duration: 4s;
      animation-timing-function: linear;
    }
    
    .animation-play-state {
      animation-name: name;
      animation-duration: 4s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
    
    .animation-play-state-hover {
      animation-name: name;
      animation-duration: 4s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-play-state: paused;
    }
    
    .animation-play-state-hover:hover {
      animation-play-state: running;
    }
    
    .animation-fill-mode {
      animation-name: name;
      animation-duration: 4s;
      animation-delay: 4s;
      animation-timing-function: linear;
    }
    
    @keyframes remove {
      from {
        background-color: pink;
        transform: translateX(0%);
      }
      
      50% {
        background-color: skyblue;
        transform: translateX(50%);
      }
      
      to {
        background-color: plum;
        transform: translateX(100%);
      }
    }
    
    .animation-timing-function {
      animation-name: remove;
      animation-duration: 4s;
      animation-iteration-count: infinite;
    }
    
    .animation-direction {
      animation-name: remove;
      animation-duration: 4s;
      animation-iteration-count: infinite;
    }
  </style>
</head>
<body>
  <!--animation-name属性设置@keyframes规则名称，其属性值可为禁用动画none或@keyframes规则名称。@keyframes通过定义动画的关键帧达到控制动画中间步骤的目的-->
  <div class="div-card">
    <div class="div-card-title">
      animation-name属性设置@keyframes规则名称，其属性值可为禁用动画none或@keyframes规则名称
    </div>
    <div class="div-card-body" style="display: flex;column-gap: 100px">
      <div class="div-card-son animation-name" style="animation-name: name"></div>
    </div>
  </div>
  <br><br><br>

  <!--animation-duration属性设置动画周期，其属性值只可为零或正数且需要单位秒s或毫秒ms-->
  <div class="div-card">
    <div class="div-card-title">
      animation-duration属性设置动画周期，其属性值只可为零或正数且需要单位秒s或毫秒ms
    </div>
    <div class="div-card-body" style="display: flex;column-gap: 100px">
      <div class="div-card-son animation-duration" style="animation-duration: 4ms">4ms</div>
      <div class="div-card-son animation-duration" style="animation-duration: 4s">4s</div>
      <div class="div-card-son animation-duration" style="animation-duration: -1s">-1s</div>
    </div>
  </div>
  <br><br><br>
  
  <!--animation-timing-function属性设置动画变速-->
  <div class="div-card">
    <div class="div-card-title">
      animation-timing-function属性设置动画变速
    </div>
    <div class="div-card-body" style="display: grid;grid-template-columns: repeat(2,300px);column-gap: 100px">
      <div>
        <div class="div-card-son animation-timing-function" style="animation-timing-function: ease">中间加速结束减速ease</div>
        <div class="div-card-son animation-timing-function" style="animation-timing-function: linear">匀速linear</div>
        <div class="div-card-son animation-timing-function" style="animation-timing-function: ease-in">开始较慢逐渐加速ease-in</div>
        <div class="div-card-son animation-timing-function" style="animation-timing-function: ease-out">开始较快逐渐减速ease-out</div>
        <div class="div-card-son animation-timing-function" style="animation-timing-function: ease-in-out">开始较慢中间加速结束减速ease-in-out</div>
      </div>
      
      <div>
        <div class="div-card-son animation-timing-function" style="animation-timing-function: step-start">step-start</div>
        <div class="div-card-son animation-timing-function" style="animation-timing-function: step-end">step-end</div>
        <div class="div-card-son animation-timing-function" style="animation-timing-function: steps(5, jump-start)">跳跃发生于动画开始steps(5, jump-start)</div>
        <div class="div-card-son animation-timing-function" style="animation-timing-function: steps(5, jump-end)">跳跃发生于动画结束steps(5, jump-end)</div>
        <div class="div-card-son animation-timing-function" style="animation-timing-function: steps(5, jump-none)">两端无跳跃steps(5, jump-none)</div>
      </div>
    </div>
  </div>
  <br><br><br>
  
  <!--animation-delay属性设置动画延迟，其属性值可为零、正数或负数且需要单位秒s或毫秒ms，负数表示动画立即开始-->
  <div class="div-card">
    <div class="div-card-title">
      animation-delay属性设置动画延迟，其属性值可为零、正数或负数且需要单位秒s或毫秒ms，负数表示动画立即开始
    </div>
    <div class="div-card-body" style="display: flex;column-gap: 100px">
      <div class="div-card-son animation-delay" style="animation-delay: 40ms">4ms</div>
      <div class="div-card-son animation-delay" style="animation-delay: 10s">4s</div>
      <div class="div-card-son animation-delay" style="animation-delay: -1s">-1s</div>
    </div>
  </div>
  <br><br><br>
  
  <!--animation-iteration-count属性设置动画次数，其属性值可为无限循环infinite、整数或小数-->
  <div class="div-card">
    <div class="div-card-title">
      animation-iteration-count属性设置动画次数，其属性值可为无限循环infinite、整数或小数
    </div>
    <div class="div-card-body" style="display: flex;column-gap: 100px">
      <div class="div-card-son animation-iteration-count" style="animation-iteration-count: infinite">infinite</div>
      <div class="div-card-son animation-iteration-count" style="animation-iteration-count: 3">3</div>
      <div class="div-card-son animation-iteration-count" style="animation-iteration-count: 1.5">1.5</div>
    </div>
  </div>
  <br><br><br>
  
  <!--animation-direction属性设置动画顺序，其属性值可为正向播放normal、反向播放reverse、每个循环中正反交替播放alternate或每个循环中反正交替播放alternate-reverse-->
  <div class="div-card">
    <div class="div-card-title">
      animation-direction属性设置动画顺序
    </div>
    <div class="div-card-body" style="display: flex;flex-flow: column;row-gap: 10px">
      <div class="div-card-son animation-direction" style="animation-direction: normal">向播放normal</div>
      <div class="div-card-son animation-direction" style="animation-direction: reverse">反向播放reverse</div>
      <div class="div-card-son animation-direction" style="animation-direction: alternate">每个循环中正反交替播放alternate</div>
      <div class="div-card-son animation-direction" style="animation-direction: alternate-reverse">每个循环中反正交替播放alternate-reverse</div>
    </div>
  </div>
  <br><br><br>
  
  <!--animation-fill-mode属性设置动画执行前后的样式沿用，其属性值可为不沿用none、动画执行后沿用forwards、动画执行前沿用backwards或动画执行前后都沿用both-->
  <div class="div-card">
    <div class="div-card-title">
      animation-fill-mode属性设置动画执行前后的样式沿用，其属性值可为不沿用none、动画执行后沿用forwards、动画执行前沿用backwards或动画执行前后都沿用both
    </div>
    <div class="div-card-body" style="display: flex;column-gap: 100px">
      <div class="div-card-son animation-fill-mode" style="animation-fill-mode: none">不沿用none</div>
      <div class="div-card-son animation-fill-mode" style="animation-fill-mode: forwards">动画执行后沿用forwards</div>
      <div class="div-card-son animation-fill-mode" style="animation-fill-mode: backwards">动画执行前沿用backwards</div>
      <div class="div-card-son animation-fill-mode" style="animation-fill-mode: both">动画执行前后都沿用both</div>
    </div>
  </div>
  <br><br><br>
  
  <!--animation-play-state属性设置动画状态，其属性值可为运行running或暂停paused-->
  <div class="div-card">
    <div class="div-card-title">
      animation-play-state属性设置动画状态，其属性值可为运行running或暂停paused
    </div>
    <div class="div-card-body" style="display: flex;column-gap: 100px">
      <div class="div-card-son animation-play-state" style="animation-play-state: running">running</div>
      <div class="div-card-son animation-play-state" style="animation-play-state: paused">paused</div>
      <div class="div-card-son animation-play-state-hover">hover</div>
    </div>
  </div>
  <br><br><br>
</body>
</html>